<!--四位验证码输入框组件-->
<template>
  <div class="security-code-wrap">
    <label for="code">
      <ul class="security-code-container">
        <li class="field-wrap" v-for="(item, index) in number" :key="index">
          <i class="char-field">{{value[index] || placeholder}}</i>
        </li>
      </ul>
    </label>
    <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
           id="code" name="code" type="tel" :maxlength="number"
           autocorrect="off" autocomplete="off" autocapitalize="off">
  </div>
</template>
<script>
  export default {
    props: {
      number: {
        type: Number,
        default: 4
      },
      placeholder: {
        type: String,
        default: '-'
      }
    },
    // variables
    data() {
      return {
        value: ''
      }
    },
    methods: {
      handleSubmit() {
        this.$emit('input', this.value)
      },
      handleInput(e) {
        this.$refs.input.value = this.value
        this.handleSubmit()
      }
    }
  }
</script>
<style scoped lang="scss">
  .security-code-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .security-code-container {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;

    .field-wrap {
      list-style: none;
      display: block;
      width: 96px;
      height: 100px;
      background: rgba(236, 246, 245, 1);
      border-radius: 8px;
      border: none;
      text-align: center;
      font-size: 40px;
      line-height: 100px;

      .char-field {
        font-style: normal;
      }
    }
  }

  .input-code {
    position: absolute;
    left: -9999px;
    top: -99999px;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: visible;
    z-index: -1;
  }
</style>
